<template>
    <div>
       <el-table :data="this.tableData" ref="table" stripe>
            <tr v-for="(item, index) in this.tableLabel" :key="index">
                <el-table-column v-if="item.type==='createTime'" :prop="item.prop" :label="item.label" :min-width="item.width" :formatter="formatDate">
                </el-table-column>
                <el-table-column v-else-if="item.type==='updateTime'" :prop="item.prop" :label="item.label" :min-width="item.width" :formatter="formatTime">
                </el-table-column>
                <el-table-column v-else-if="item.type==='winningSupplierName'" :prop="item.prop" :label="item.label" :min-width="item.width">
                  <template slot-scope="scope">
                    <el-button type="text" @click="details(scope.row)">
                      {{"*******公司"}}</el-button>
                  </template>
                </el-table-column>
                <el-table-column v-else-if="item.type==='normal'" :prop="item.prop" :label="item.label" :width="item.width"></el-table-column>
            </tr>
        </el-table>
        <el-row>
          <el-pagination
            class="page-footer"
            background
            layout="total,prev,pager,next,sizes,jumper"
            :total="this.models.total"
            :page-sizes="[10,20,30,40,50]"
            @current-change="handlePageChange"
            @size-change="handleSizeChange"
          />
        </el-row>

        

    </div>
  </template>
  
  <script>
    import moment from 'moment'
  export default {
      props: {
          tableData: {
            type: Array,
            default: () => {
                return [];
            }
          },
          tableLabel:{
            type: Array,
            default: () => {
                return [];
            }
          },
          models: {
            type: Object,
            default: () => {
                return null;
            }
          },
      },
      data() {
          return {
            params: {
                type:"page",
                pageNum: 1,
                pageSize: 10
            }
          };
      },
      mounted(){
      },
      methods: {
        formatDate(row, column) {
            const date = row[column.property]
            if (date == undefined) {
            return ''
            }
            return moment(date).format("YYYY-MM-DD")
        },
        formatTime(row, column) {
            const date = row[column.property]
            if (date == undefined) {
            return ''
            }
            return moment(date).format("YYYY-MM-DD HH:mm:ss")
        },
        details(row){
          this.$emit("on-details-click", row);
        },
        handlePageChange(page) {
            this.params.pageNum = page;
            this.loadList();
        },
        handleSizeChange(page) {
            this.params.pageSize = page;
            this.loadList();
        },
        loadList() {
            this.$emit("on-search-click", this.params);
        }
      }
  };
  </script>
  
  